<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <style>
        .box{
            width:170px;
            height:170px;
            background: darkcyan;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        <my-user>
            <template v-slot:default="scope">
                {{scope.user.phone}}
            </template>
        </my-user>
        <hr>
        <my-user>
            <template v-slot:default="scope">
                {{scope.user.age}}
            </template>
        </my-user>
        <hr>
        <my-user>
            <template #default="scope">
                {{scope.user.birth}}
            </template>
        </my-user>
        <hr>
        <my-home msg="2114-daydayup" :count="count"></my-home>
        <hr>
        <my-home msg="2114-daydayup" :count="count">
            <div>
                <h2>请让我下课</h2>
                <button>点击下课</button>
            </div>

            <template v-slot:banner>
                <div>
                    <h1>banner-1</h1>
                    <h1>banner-2</h1>
                    <h1>banner-3</h1>
                </div>
            </template>
        </my-home>

        <my-home msg="2114-daydayup" :count="count">
            <div>
                <h2>请让我下课-快点</h2>
                <button>点击下课-快点</button>
            </div>
            <template #banner>
                <div>
                    <h1>banner-4</h1>
                    <h1>banner-5</h1>
                    <h1>banner-6</h1>
                </div>
            </template>
        </my-home>
        
    </div>

    <template id="myhome">
        <div>
            <h2>Home - HOme  - Home </h2>
            <h2>msg -- {{msg}}</h2>
            <h2>count -- {{count}}</h2>
            <hr>
            <div style="width:40%;height:120px;border:1px solid blue;">
                <slot>这是匿名插槽  如果没有父给子传递模板内容分发 就先默认这个</slot>
            </div>
            <div style="width:40%;height:220px;border:1px solid red;">
                <slot name="banner">这是具名插槽  我这里只接受 banner 内容</slot>
            </div>
            <div style="width:40%;height:220px;border:1px solid yellow;">
                <slot name="menu">这是具名插槽  我这里只接受 menu 内容</slot>
            </div>
        </div>
    </template>

    <template id="myuser">
        <div>
            <h2>用户信息展示-user </h2>
            <h2>当前信息: <slot :user="obj" >{{ obj.username }}</slot> </h2>
        </div>
    </template>
 
    <script>
        const bus = new Vue()  // 空的Vue 实例对象 
        Vue.component("myhead",{
            template:"<h2>wh2114 - 天天大声背面试题目 </h2>"
        })
        
        Vue.component("myHome",{
            template:"#myhome",
            props:['msg','count']
        })
        
        Vue.component("my-user",{
            template:"#myuser",
            data(){
                return {
                    obj:{
                        username:"zuozuomu",
                        age:18,
                        birth:"0119",
                        phone:"18012341234"
                    }
                }
            }
        })
        
        const vm = new Vue({
            data:{
                title:"Vue component 组件插槽",
                count:1314520
            },
            components:{
               
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
               
            }
        }).$mount("#app")


    </script>
    <!-- 
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板  内容分发 
        
        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签 动态分发子组件  子组件放到指定的位置区域 (slot 插槽)

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"
        name="menu"  v-slot:menu   #menu 

        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
     -->
</body>
</html>